<script setup lang="ts">
import { bus } from '@/utils/mitt'
import { ref } from 'vue'

const title = ref()
const userRowId = ref()
bus.on('userRow', (id) => {
  userRowId.value = id
  if (id === 1) {
    title.value = '用户信息'
  } else if (id === 2) {
    title.value = '用户管理员信息'
  } else if (id === 3) {
    title.value = '产品管理员信息'
  } else if (id === 4) {
    title.value = '消息管理员信息'
  } else if (id === 5) {
    title.value = '学生信息'
  }
})
defineProps(['userDataId'])
const dialogTableVisible = ref(false)
const open = () => {
  dialogTableVisible.value = true
}
defineExpose({
  open,
})
</script>

<template>
  <el-dialog v-model="dialogTableVisible" :title="title" width="400">
    <el-container>
      <el-aside width="70px">
        <div class="block">
          <el-avatar
            shape="square"
            :size="70"
            :src="userDataId.image_url"
            v-if="userDataId.image_url"
          />
          <el-avatar
            shape="square"
            :size="70"
            src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
            v-else
          />
        </div>
      </el-aside>
      <el-main>
        <div class="stuInfo" v-if="userRowId == 5">
          <div v-for="(item, index) in userDataId" :key="index">
            {{ index }}：{{ item }}
          </div>
        </div>
        <div class="other" v-else>
          <div>账号：{{ userDataId.account }}</div>
          <div>姓名：{{ userDataId.name }}</div>
          <div>性别：{{ userDataId.sex }}</div>
          <div>部门：{{ userDataId.department }}</div>
          <div>邮箱：{{ userDataId.email }}</div>
          <div v-show="userRowId !== 1">
            更新时间：{{ userDataId.updata_time }}
          </div>
          <div v-show="userRowId == 1">
            创建时间：{{ userDataId.create_time }}
          </div>
          <div>
            状态：
            <el-tag type="success" v-if="userDataId.status === 0">正常</el-tag>
            <el-tag type="danger" v-else>冻结</el-tag>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-aside {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.el-main {
  display: flex;
  flex-direction: column;
  padding: 0;
  //height: 170px;
  justify-content: space-around;
  padding-left: 20px;
  .other,
  .stuInfo {
    margin: 10px 0;
    div {
      margin: 10px 0;
    }
  }
}
</style>
